<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>谷歌地图搜索</title>
<meta name="Generator" content="EditPlus" />
<meta name="Keywords" content="Tour, Google Maps ,Flickr" />
<meta name="Description" content="Tour with Google Maps and Flickr" />
<style type="text/css" media="screen">
<!--
html,body{margin:0;font:12px/1.5em arial;color: #666;}
#over{position: relative; top:-30px;width:650px;margin:auto;}
#map{width:650px;height:350px;margin:auto;}
p.anote{margin:0;}
ul,li{padding:0;margin:0;list-style:none;}
img{border:0;}
form{padding:1px 2px 3px;margin:0;}
form span{font-weight:bold;}
form *{vertical-align: middle;}
input{color: #333;font-size:12px;}
.cip{border: 1px solid #ccccff;width:427px;}
.nip{border: 1px solid #ccccff;width:194px;margin-left:4px;*width:193px;}
.nipl{border: 1px solid #ccccff;width:157px;margin-left:4px;*width:155px;}
.nipc{border: 1px solid #ccccff;width:110px;}
a:link{text-decoration:underline;background: #fffbcc;color:#f00;}
a:visited{text-decoration:underline;background: #fffbcc;color:#f00;}
a:hover{text-decoration:underline;color:#369;}
a:active{text-decoration:underline;color:#369;}
h1,h2,h3,h4{margin:0;padding:0;font:1em arial;}
h2{padding:0 1px;font:bold 14px/1.6em sans-serif;}
#tabs{zoom:1;overflow:hidden;background: url(images/bg_tab.gif) repeat-x bottom;padding:0 0 0 100px; }
#tabs span{float: left;margin:0 0 0 12px;padding:5px 5px 1px;cursor:pointer;background: #dedede;color: #333;border: 1px solid #666;position: relative;bottom:0;}
#tabs span#scale{float:left;border: 0;background:none;padding:0 0 0 2px;}
#tabs span#scale *{vertical-align: middle;margin-right:4px;}
#tabs span.on{background: #fff;border-bottom: 1px solid #fff;}
h4{font: 12px/1.6em sans-serif;border-top: 1px solid #ccc;background: #eee;padding:1px 6px 2px;margin:4px 7px;color: #333;}
h4 span{color: #999;padding:0 0 0 7px;}
#gsearch,
#mymap{background: #fff;padding:5px;zoom: 1;overflow:hidden;}
#gsearch{display: none;margin:0 auto;padding:16px 90px 0 0;text-align: right;}
#ct{position: relative; }
#adds{width:58px;padding:3px 5px;border: 1px solid #666;border-top: 0;background: #fffbcc;}
#adds *{vertical-align: middle;}
#custom{padding:0 3px 0 0;font-weight:normal;}
#changecity{text-align: right;zoom:1;overflow:hidden;}
#changes,
#changec{text-align: right;}
#mymap #yic{width:160px;padding:1px 2px;}
.favthis{padding:0 0 0 8px;zoom: 1;overflow:hidden;}
#savec{display: none;padding:3px 5px 1px;background:#fffbcc;color:#555;display: none;border: 1px solid #e6db55;text-align: left;}
.adds{padding:7px 7px 3px;}
.adds *{vertical-align: middle;}
#myfav{width:260px;float: left;padding:10px 0;margin-top:6px;border: 1px solid #ccc;}
.clts{padding:8px 0 0;float: right;width:320px;}
#mcitys{padding:2px 7px 7px;zoom: 1;overflow:auto;}
#mcitys li{cursor:pointer;white-space:nowrap;color: #369;zoom: 1;overflow:hidden;border-bottom: 1px solid #eee; }
#mcitys li span{padding:0 5px;float: right;}
#mcitys li span.ctitle{color: #96c;float: left;}
#erm,
#cErm{margin:1px 0;padding:3px 5px 1px;background:#fffbcc;color:#555;display: none;border: 1px solid #e6db55;text-align: left;}
#addcustom{display: block;margin:6px 0 0 60px;width:84px;padding:4px 10px;border: 1px solid #666;}
.infw{width:234px;height:120px;padding:7px 13px 0;}
.yourc{margin:3px 7px;padding:1px 2px;}
.yourc *{vertical-align: middle;}
#cName{margin:0 2px 0 0;padding:1px 2px;width:120px;}
#updatec{margin:0 4px;}
.notes{clear:both;border-top: 1px solid #666;padding:5px;}
.fkd{border: 0;background:transparent;cursor:pointer;}
.bus{margin-left:1px;}
-->
</style>
<script type="text/javascript" src="http://ditu.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAACZoLVN79WT2mXp8M7Dsi-hSVbq8cAqMDJReYWuWY3FAJPhxoRBTRhRCgpQhnPbuLwfaAbgqLte5Baw" ></script>
<script type="text/javascript">
//<![CDATA[

GEvent.addDomListener(window, "load", xmLoad);
GEvent.addDomListener(window, "unload", GUnload);

var xm = {
  mcookies : [],
  map : null,
  cmarker : null,
  elt : function(eltId){
    return document.getElementById(eltId);
  },
  hide : function(eltId){
    xm.elt(eltId).style.display = "none";
  },
  show : function(eltId){
    xm.elt(eltId).style.display = "block";
  },
  initInput : function(eltId,msg){
	xm.elt(eltId).onfocus = function(){
      if(this.value==msg){this.value="";}else this.select();
    }
    xm.elt(eltId).onblur = function() {
      if (this.value == "") { this.value = msg;}
    }
  },
  setCookie : function(sName, sValue){
    var expd = new Date("January 1, 3000");
	document.cookie = sName + "=" + escape(sValue) + ";expires="+expd.toGMTString();
  },
  getCookie : function (sName){
    var aCookie = document.cookie.split("; ");
    for (var i=0; i < aCookie.length; i++){
      var aCrumb = aCookie[i].split("=");
      if (sName == aCrumb[0]){
        return unescape(aCrumb[1]);
      }
    }
  },
  deleteCookie : function ( name ) {
	if ( xm.getCookie( name ) ) document.cookie = name + '=0';
  },
  myCookie : function () {
    if(xm.getCookie("xmmap")){
     var tps = xm.getCookie("xmmap").split(",");
     xm.mcookies =[];
     for(var i=0,t=tps.length;i<t;i++){
	   if(tps[i].indexOf("=")>=0){
	     xm.mcookies.push(tps[i]);
	   }
	 }
    }
  }

}


function xmLoad() {
  new xnMap();
}


function xnMap(){
  this.init();
}

xnMap.prototype.init = function(){
  xm.myCookie();
  var pLat,pLng,zoomNub;
  if(xm.mcookies[0]){
    var cesd = xm.mcookies[0].split("=");
    var ltgd = cesd[1].split("|");
	var tz = parseInt(cesd[2]);
    if(ltgd&&tz){
	  pLat = ltgd[0];
	  pLng = ltgd[1];
	  zoomNub = tz;
	}
  } else {
	  pLat = "39.917";
	  pLng = "116.397";
	  zoomNub = 11;
  }
  if (GBrowserIsCompatible()) {
    xm.map  = new GMap2(document.getElementById("map"));
    xm.map.setCenter(new GLatLng(pLat,pLng), zoomNub);
	xm.map.addControl(new GLargeMapControl()); 
  }
  
  xnMap.getCitys();
  
  xm.initInput("yic","请输入省/市/县/区");
  
  GEvent.addDomListener(xm.elt("transitButton"), "click", xnMap.transitSubmit);

  GEvent.addDomListener(xm.elt("ccity"), "click", xnMap.findCity);
  GEvent.addDomListener(xm.elt("changec"), "click", xnMap.changeCity);
  GEvent.addDomListener(xm.elt("changes"), "click", xnMap.changeBack);

  GEvent.addDomListener(xm.elt("addcustom"), "click", xnMap.customCity);

}
xnMap.changeCity = function(){
  xm.hide("gsearch");
  xm.show("mymap");
  xm.elt("changec").className= "on";
  xm.elt("changes").className= "";
}
xnMap.changeBack = function(){
  xm.hide("mymap");
  xm.show("gsearch");
  xm.elt("changec").className= "";
  xm.elt("changes").className= "on";
}
xnMap.findCity = function(){
  var geocoder = new GClientGeocoder();
  if (geocoder) {
  var address = xm.elt("yic").value;
	geocoder.getLatLng(
	  address,
	  function(point) {
		if (!point) {
		  xm.elt("erm").innerHTML = "无法定位您输入的: " + address + "，请重新输入";
		  xm.elt("yic").focus();
		  xm.show("erm");
		} else {
		  xm.map.setCenter(point, 12);
		  var marker = new GMarker(point);
		  xm.map.clearOverlays();
		  xm.map.addOverlay(marker);
		  xm.hide("erm");
		  xm.show("savec");
		  GEvent.addDomListener(xm.elt("savec"), "click", xnMap.saveCity);
		}
	  }
	);
  }
}
xnMap.saveCity = function(){
	xm.hide("erm");
	var tp = xm.map.getCenter().toString();
	var tz = xm.map.getZoom().toString();
	var tl = tp.length-1;
	var md = tp.indexOf(",");
	var lat = tp.substring(1,md);
	var lng = tp.substring(md+1,tl);
	var tst = xm.elt("yic").value;
	var inp = tst + "=" + lat + "|" + lng + "=" + tz;
	var cks = "=" + xm.mcookies.join("=");
	if( cks.indexOf("=" + tst + "=")<0){
	  xm.mcookies.push(inp);
	  xm.setCookie("xmmap",xm.mcookies);
	  xm.myCookie();
	  xnMap.getCitys();
	}else{
	  xm.elt("erm").innerHTML = '您已经收藏了此地址。';
	  xm.show("erm");
	  xm.elt("yic").select();
	  setTimeout('xm.hide("erm")',1000)
	}
	xm.hide("savec");
	xm.elt("yic").focus();
}
xnMap.customOk = function(){
  if(!xm.elt("cName").value||xm.elt("cName").value==""){
    xm.elt("cErm").innerHTML = "请输入要收藏地址的名字。";
	xm.show("cErm");
    xm.elt("cName").focus();
	return false
  }
  var lat = xm.cmarker.getPoint().y;
  var lng = xm.cmarker.getPoint().x;
  var tz = xm.map.getZoom().toString();
  var tst = xm.elt("cName").value;
  var inp = tst + "=" + lat + "|" + lng + "=" + tz;
  var cks = xm.mcookies.join("=");
  if( cks.indexOf("=" + tst + "=")<0){
	  xm.hide("cErm");
	  xm.mcookies.push(inp);
	  xm.map.removeOverlay(xm.cmarker);
	  xm.setCookie("xmmap",xm.mcookies);
	  xm.myCookie();
	  xnMap.getCitys();
	}else{
	  xm.elt("cErm").innerHTML = '您已经收藏了此地址。';
	  xm.show("cErm");
	  setTimeout('xm.hide("cErm")',1000)
	  xm.elt("cName").select();
	}
}

xnMap.customCity = function(){
  var cpt = xm.map.getCenter();
  xm.cmarker = new GMarker(cpt,{draggable: true})
  var cHTML = '<div class="infw">收藏名称：<br /><input type="text" class="nip" id="cName" /><input type="submit" id="cSubmit" value="收藏" /><p id="cErm"></p><p>您可以移动下面的小图标到需要的位置<br />然后放大或缩小地图，再提交收藏。</p></div>';
  xm.map.clearOverlays();
  xm.map.addOverlay(xm.cmarker);
  xm.cmarker.openInfoWindowHtml(cHTML);
  GEvent.addListener(xm.cmarker, "dragstart", function() { xm.map.closeInfoWindow(); });
  GEvent.addListener(xm.cmarker, "dragend", function() { 
    xm.cmarker.openInfoWindowHtml(cHTML);
	GEvent.addDomListener(xm.elt("cSubmit"), "click",xnMap.customOk ); 
  });
  
  GEvent.addDomListener(xm.elt("cSubmit"), "click",xnMap.customOk );
  return false
}
xnMap.transitSubmit = function(){
  var form = xm.elt("transitTab");
  var start = encodeURIComponent(form.elements["saddr"].value);
  var end = encodeURIComponent(form.elements["daddr"].value);
  var actionUrl = "http://ditu.google.cn/maps?hl=zh-CN&ie=UTF8&dirflg=r&f=d&saddr=" + start + "&daddr=" + end;
  var comVn = form.elements["saddr"];
  var comV = form.elements["daddr"];
  var comQn = comVn.value;
  var comQ = comV.value;
  if(!comQn||comQn==""){
    alert("请输入关键字！");
    comVn.focus();
	return false
  }
  if(!comQ||comQ==""){
    alert("请输入关键字！");
    comV.focus();
	return false
  }
  window.open(actionUrl);
}

xnMap.getCitys = function(){
  var ckl = xm.mcookies.length,
      ctsHTML = "";
  for (var i=0;i<ckl;i++ ) {
	if(!xm.mcookies[i]) continue;
	var ces = xm.mcookies[i].split("=");
	var ltg = ces[1].split("|");
	if(!ltg) continue;
	if(i==0){
	  ctsHTML = '<li id="c'+i+'"><span class="ctitle" onclick="xm.map.setCenter(new GLatLng(' + ltg[0] + ',' + ltg[1] + '), ' + ces[2] + ');">'
	           + ces[0] + '</span><span onclick="removeCity('+i+')">删除</span><span id="dc' + i + '">默认地址</span></li>';
	}else
	ctsHTML += '<li id="c'+i+'"><span class="ctitle" onclick="xm.map.setCenter(new GLatLng(' + ltg[0] + ',' + ltg[1] + '), ' + ces[2] + ');">'
	           + ces[0] + '</span><span onclick="removeCity('+i+')">删除</span><span id="dc' + i + '" onclick="defaultCity('+i+','+ckl+')">设为默认地址</span></li>';
  }
  xm.elt("mcitys").innerHTML = ctsHTML;
}
function removeCity(t){
  xm.mcookies[t] = null;
  xm.setCookie("xmmap",xm.mcookies);
  xm.hide("c" + t);
}
function defaultCity(t,l){
  var tep = xm.mcookies[t];
  xm.mcookies[t] = null;
  xm.mcookies.unshift(tep);
  xm.setCookie("xmmap",xm.mcookies);
  for(var i=1;i<l;i++){
	xm.elt("dc" + i).innerHTML = "设为默认地址";
  }
  xm.elt("dc" + t).innerHTML = "已设成默认地址";
  xm.getCookie();
}
//]]>
</script>
</head>
<body>
	<div id="map"></div>
	<div id="over">
		<div id="tabs"><span id="changec" class="on">我的地址收藏夹</span><span id="changes">地图搜索项</span></div>
		<div id="ct">

		<div id="gsearch">
			<form id="comTab" method="get" action="http://ditu.google.cn/maps?" target="_blank">			
				<input type="hidden" name="f" value="q" />
				<input type="hidden" name="hl" value="zh-CN" />
				<input type="hidden" name="ie" value="UTF8" />				
				<input class="cip" name="q" type="text" value="" />
				<input name="btn" type="submit" class="fk" value="搜素地图" />
			</form>
			<form id="roundTab" method="get" action="http://ditu.google.cn/maps?" target="_blank">
				<input type="hidden" name="f" value="l" />
				<input type="hidden" name="hl" value="zh-CN" />
				<input type="hidden" name="ie" value="UTF8" />
				<span>在</span><input class="nip" type="text" name="near" value="" />
				<span>找</span><input class="nip" type="text" name="q" value="" />
				<input type="submit" class="fk" value="搜索周边" />
			</form>
			<form id="transitTab" method="get" action="http://ditu.google.cn/maps?" target="_blank">
				<input type="hidden" name="f" value="d" />
				<input type="hidden" name="hl" value="zh-CN" />
				<input type="hidden" name="ie" value="UTF8" />
				<span>从</span><input class="nipl" type="text" name="saddr" value="" />
				<span>到</span><input class="nipl" type="text" name="daddr" value="" />
				<input type="submit" class="fk" value="行车路线" />
				<input class="bus fk" type="button" value="公交换乘" id="transitButton"/>
			</form>
		</div>

		<div id="mymap">
			<div id="myfav">
				<div class="yourc">
					<input type="text" id="yic" class="nipc" value="请输入省/市/县/区" />
					<input type="submit" value="定位城市" id="ccity"  />
					<a id="savec" href="javascript: void(0);">将定位地址收藏到地址列表</a>
					<div id="erm"></div>
				</div>
				<div class="favthis">
					<a href="javascript: void(0);" id="addcustom">自定义收藏地址</a>
				</div>
			</div>
				
			<div class="clts">
				<h4>收藏地址列表<span>您可以先定位城市，然后再自定义地址</span></h4>
				<ul id="mcitys"></ul>
			</div>
		</div>

		</div>

	</div>
</div><!-- 
<p class="notes">说明：所有地址收藏数据都以Cookie方式存储在客户端。</p> -->
</html>